var theJson = null;
var array = [];
var array_0_child = [];
var array_1_child = [];
//保存排序后的项
$(function() {
	var selected = null;
	$.get("../datas/urls.json", function(json) {
		theJson = json;
		//获得按项个数排序的结果
		//TODO:array比theJson少了一项
		for (var p in json) {
			if ("count" != p) {
				var obj = new Object;
				obj.url = p;
				obj.count = json[p].count;
				if (obj.count == 1) {
					array_1_child.push(obj);
				} else {
					if (array.length == 0) {
						array.push(obj);
					} else {
						var result = false;
						for (var i = 0; i < array.length; i++) {
							if (obj.count > array[i].count) {
								array.splice(i, 0, obj);
								result = true;
								break;
							}
						}
						if (!result) {
							array.push(obj);
						}
					}
				}
			}
		}

		//生成左侧列表
		var html = "";
		var template1 = "<div class='item catalog' link='{l}'><img class='icon' src='{i}' alt=''/><div class='name'>{n}({c})</div><div class='link'>{l}</div><div class='button open'>打开</div></div>";
		var template2 = "<div class='item catalog' link='{l}'><img class='icon' src='{i}' alt=''/><div class='name'>{n}({c})</div><div class='link'>{l}</div><div class='button unfold' index='{l}'>展开</div><div class='button open'>打开</div></div>";		/*
		 for (var p in json) {
		 if ("count" != p) {
		 // html += template.replace(/{l}/g, p).replace(/{n}/, p).replace(/{i}/, p + "favicon.ico");
		 html += template.replace(/{l}/g, p).replace(/{n}/, p).replace(/{i}/, "https://www.google.com.hk/favicon.ico");		 html += "<hr/>";		 }
		 }
		 */
		//*
		for (var i = 0; i < array.length; i++) {
			var p = array[i].url;
			html += template1.replace(/{l}/g, p).replace(/{n}/, p).replace(/{c}/, array[i].count).replace(/{i}/, "https://www.google.com.hk/favicon.ico");
			html += "<hr/>";
		};
		//*/
		
		html += template2.replace(/{l}/g, "array_1_child").replace(/{n}/, "此目录下仅有一项").replace(/{c}/, array_1_child.length).replace(/{i}/, "https://www.google.com.hk/favicon.ico");
		html += "<div class='child' id='array_1_child'>";
		for (var i = 0; i < array_1_child.length; i++) {
			var p = array_1_child[i].url;
			// var count = array_1_child[i].count;
			html += template1.replace(/{l}/g, p).replace(/{n}/, p).replace(/{c}/, 1).replace(/{i}/, "https://www.google.com.hk/favicon.ico");
			html += "<hr/>";
		};
		html += "</div>";
		$("#left").html(html);

		var unfold = function() {
			var id = $(this).attr("index");
			$("#"+id).show(); 
			$(this).text("收起");
			$(this).unbind('click', unfold);
			$(this).bind('click', fold);
			event.stopPropagation();
		};
		var fold = function() {
			var id = $(this).attr("index");
			$("#"+id).hide();
			$(this).text("展开");
			$(this).unbind('click', fold);
			$(this).bind('click', unfold);
			event.stopPropagation();
		};
		$('.catalog .button.unfold').bind('click', unfold);

		$('.catalog .button.open').bind('click', function(event) {
			var link = $(this).parent().attr("link");			window.open(link);			event.stopPropagation();
		});
		$('.catalog').bind('click', function() {
			var link = $(this).attr("link");
			obj = theJson[link];
			var html = "";
			var template = "<div class='item subitem' link='{l}'><div class='name' title='{n}'>{n}</div><div class='link' title='{l}'>{l}</div><div class='button'>打开</div></div>";
			for (var p in obj) {
				if ("count" != p) {
					html += template.replace(/{l}/g, p).replace(/{n}/g, obj[p]);
					html += "<hr/>";
				}
			}
			$("div#mid>#content").html(html);
			$('.subitem .button').bind('click', function() {
				var link = $(this).parent().attr("link");
				window.open(link);			});
			if (selected != this) {
				$(this).addClass("selected");
				$(selected).removeClass("selected");
				selected = this;
			}
		});
	})
})
